<script type="module" setup>
import {ref} from "vue";

let counter = ref (0);

function show() {
  alert(counter.value);
}
let incr=()=>{
  counter.value++
}
let decr=()=>{
  counter.value--
}

//使用ref关键字来进行数据的响应式处理

</script>

<template>
  <!--响应式的基础-->
  <div>
    <button @click="counter--">-</button>
    <br>
    <button @click="incr">使用方法来+</button>
    <br>
    {{ counter }}
    <br>
    <button @click="counter++">+</button>
    <br>
    <button @click="decr">使用方法来-</button>
    <hr>
    <!-- 此案例,我们发现counter值,会改变,但是页面不改变! 默认Vue3的数据是非响应式的!-->
    <button @click="show()">显示counter值</button>
  </div>
</template>
<style scoped>

</style>